<!DOCTYPE HTML>
<html>
<head>

<!-- Include the Monocle library and styles -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--  <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png"/>  -->
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>EBook-Example</title>

<script type="text/javascript" src="../../scripts/monocore.js"></script>
<script type="text/javascript" src="../../scripts/monoctrl.js"></script>
<script type="text/javascript" src="../../scripts/oldbook.js"></script>

<link rel="stylesheet" type="text/css" href="../../styles/monocore.css" />
<link rel="stylesheet" type="text/css" href="../../styles/monoctrl.css" />
<link rel="stylesheet" type="text/css" href="../../styles/oldbook.css" />

</head>

<body>

	<script type="text/javascript">
		(function() {
			// An AJAX-based bookdata object
			var bookData = {

				${BookScript}

				/**
				getComponents : function() {
					return [ '/books/dubliners/0/raw/',
							'/books/dubliners/1/raw/',
							'/books/dubliners/2/raw/',
							'/books/dubliners/3/raw/',
							'/books/dubliners/4/raw/',
							'/books/dubliners/5/raw/' ];
				},
				getContents : function() {
					return [ {
						title : "The Sisters",
						src : "/books/dubliners/1/raw/"
					}, {
						title : "An Encounter",
						src : "/books/dubliners/2/raw/"
					}, {
						title : "Araby",
						src : "/books/dubliners/3/raw/"
					}, {
						title : "Eveline",
						src : "/books/dubliners/4/raw/"
					}, {
						title : "After the Race",
						src : "/books/dubliners/5/raw/"
					} ];
				},
				getMetaData : function(key) {
					return {
						title : "EBookExample",
						creator : "James Joyce"
					}[key];
				},
				**/
				getComponent : function(componentId) {
					return this.getViaAjax(componentId);
				},
				getViaAjax : function(path) {
					var ajReq = new XMLHttpRequest();
					ajReq.open("GET", path, false);
					ajReq.send(null);
					return ajReq.responseText;
				}
			}

			// Initialize the reader element.
			function init() {
				var bkTitle = bookData.getMetaData('title');
				window.placeSaver = new Monocle.Controls.PlaceSaver(bkTitle);
				var options = {
					place : placeSaver.savedPlace(),
					stylesheet : 'body { font-family: Palatino, Georgia, serif; line-height: 1.3; font-size: 11pt; color: #310; } h1, h2, h3, h4 { margin-top: 1em; margin-bottom: 2em; } .cover { text-transform: uppercase; text-align: center; } .cover h1 { letter-spacing: 0.2em; font-size: 1.7em; margin-bottom: 2em; } .cover h2 { font-size: 1em; margin-bottom: 3em; } .cover h2 span { font-size: 0.8em; display: block; font-weight: normal; } .cover h3 { font-weight: normal; font-size: 2em; } .cover p { text-transform: none; font-size: 11px; }',
					panels : Monocle.Browser.on.Kindle3 ? Monocle.Panels.eInk
							: Monocle.Panels.Marginal
				}
				window.reader = Monocle.Reader('reader', bookData, options,
						prep);
			}

			function prep(rdr) {
				rdr.addControl(placeSaver, 'invisible');
				oldBookSpinner(reader);
				oldBookMagnifier(reader);
				oldBookTitle(reader);
				var chT = oldBookChapterTitle(reader);
				var pgN = oldBookPageNumber(reader);
				oldBookScrubber(reader, chT, pgN);
				Monocle.Events.listen(window, 'resize', onResize);
			}

			function onResize() {
				window.reader.resized();
			}

			Monocle.Events.listen(window, 'load', init);
		})();
	</script>
</head>

<body>

	<div id="readerBg">
		<div class="board"></div>
		<div class="jacket"></div>

		<div class="dummyPage"></div>
		<div class="dummyPage"></div>
		<div class="dummyPage"></div>
		<div class="dummyPage"></div>
		<div class="dummyPage"></div>
	</div>

	<div id="readerCntr">
		<div id="reader"></div>

	</div>

</body>

</html>